Day19:Vue.js（一）

第 12 屆 iThome 鐵人賽

DAY 19

Modern Web

小白的JavaScript讀書日記系列第 19 篇

12th鐵人賽

q20038848

2020-09-20 07:21:39

2580 瀏覽

分享至

宣告式渲染

先前我們在JavaScript有提到的指令式程式設計，也稱作指令式程式渲染。
這邊來回顧一下：

<body>
  <h1 id="message"></h1>
  <input type="text" id="result" value="Hello JavaScript">
  <script>
    document.querySelector('#message').innerHTML = document.querySelector('#result').value;

    document.querySelector('#result').addEventListener('input', (el) => {
      document.querySelector('#message').innerHTML = el.target.value;
    })
  </script>
</body>

我們透過addEventListener監聽input，將輸入的值傳到h1上面，如果input內容更改了，h1也會更改。
以上的範例中，如果多個標籤需要連動更新程式碼就會變得很肥大，請看下方範例：

body>
  <h1 id="message"></h1>
  <h1 id="message1"></h1>
  <h1 id="message2"></h1>
  <input type="text" id="result" value="Hello JavaScript">
  <script>
    document.querySelector('#message').innerHTML = document.querySelector('#result').value;
    document.querySelector('#message1').innerHTML = document.querySelector('#result').value;
    document.querySelector('#message2').innerHTML = document.querySelector('#result').value;

    document.querySelector('#result').addEventListener('input', (el) => {
      document.querySelector('#message').innerHTML = el.target.value;
      document.querySelector('#message1').innerHTML = el.target.value;
      document.querySelector('#message2').innerHTML = el.target.value;
    })
  </script>
</body>

有發現嗎？我只是要控制三個，程式碼直接多一倍出來不管是JS還是HTML。

渲染式的宣告是什麼？我們將上面的例子用Vue來改寫：

<body>
  <div id="demo">
    <h1> {{message}} </h1>
    <h1> {{message}} </h1>
    <h1> {{message}} </h1>
    <input v-model="message">
  </div>
  <script>
    const vm = Vue.createApp({
      data() {
        return {
          message: 'Hello Vue!'
        }
      }
    }).mount('#demo')
  </script>
</body>

有沒有發現，同樣的效果，程式碼卻少很多行！
我們現在來看這段程式碼，其中{{}}內容會對應到Vue.js的實體的message的狀態，並且渲染至畫面，當我們想要多綁幾組h1的時候只需要修改HTML即可！

Vue與MVVM

MVVM維基百科的解釋！，可以先看完再看以下Kuro大的解釋會比較清楚。
那和Vue有什麼關係呢？
Vue也是採用了MVVM的策略，將 DOM 的事件監聽與狀態的資料綁定封裝起來，當使用者透過操作 View 或觸發網頁上的事件，ViewModel 層的 Vue.js 就會將狀態回存至 Model (由某個 JavaScript 物件表示)。若 Model 裡的狀態被修改了，Vue.js 也會同步更新網頁模板 (View) 的對應內容。

元件系統

元件系統就是，將網頁的應用元件化，可以將同樣邏輯，模板的東西拿來重複使用。

Hello Vue

如何使用
用法像jQuery一樣，可以將:
<script src="http://unpkg.com/vue@next">//這是Vue3.0的 </script>加在</html>的上方即可開始使用。

Vue的實體物件
使用Vue時，一開始我們需要建立一個實體物件，並將物件指定置vm中：

<div id="demo">
  {{message}}
  </div>
    const vm = Vue.createApp({
      data() {
        return {
          message: 'Hello Vue!'
        }
      }
    }).mount('#demo')

vm這個新產生的實體物件就稱為『Vue.js實體物件』，我們將透過這個來掛載在網頁上的某個DOM節點，來控制節點的內容。

Vue實體的核心
同時我們建立Vue實體物件時，還會引入一個物件參數，這個物件參數就是Vue實體的核心，通常被稱為option物件，在這個物件中，我們會定義各式各樣的UI與模板相關的狀態，事件，函式...等，以上方為例的option就是以下這段：

      data() {
        return {
          message: 'Hello Vue!'
        }
      }

掛載至DOM
Vue實體提供了mount()方法來指定：

<div id="demo">
  {{message}}
  </div>
    const vm = Vue.createApp({
    });
    vm.mount('#demo')

將Vue實體掛載至<div id="demo">。

定義狀態與網頁模版的映射關係

掛載後，我們搭配Hello Vue的例子中來看：

<div id="demo">
  {{message}}
  </div>
    const vm = Vue.createApp({
      data() {

      }
    })
    vm.mount('#demo')

上述程式碼中，掛載後並不會有任何的結果出現在網頁上，
因為Vue是採用MVVM模式來操作網頁內容，我們需要先將網頁畫面會用到的定義，再由HTML模板進行輸出。

Vue實體是透過 data屬性來儲存

<div id="demo">
  {{message}}
  </div>
    const vm = Vue.createApp({
      data() {
          return {
              message:'Hello Vue!'
          }
      }
    })
    vm.mount('#demo')

上述程式碼在實體中定義了message他的值為Hello Vue!字串。

輸出至網頁模版
Vue.js的模板語法是採用Mustache語法（大鬍子語法），就是上述程式碼中的{{message}}。
p.s.:Vue的Mustache語法允許做一些簡單的運算：

<body>
  <div id="demo">
    {{message}},
    </br>
    數量：{{amount}} 份
    </br>
    單價：{{price}} 元
    </br>
    總計：{{amount*price}} 元
  </div>
  <script>
    const vm = Vue.createApp({
      data() {
        return {
          message: '大麥克'
          price: 199
          amount: 2
        }
      }
    });
    vm.mount('#demo')
  </script>
</body>

再Vue實體被建立的時候，Vue.js會自動為這個實體加上$data屬性，我們可以透過這個屬性來操作內部狀態vm.$data.xxxx。
這邊要特別注意，以上面例子來說如，結果可能如下：

vm.mount('#demo');
vm.$data.message = '麥香魚';
//Console結果：
//Uncaught TypeError: Cannot set property 'message' of undefined

可以寫成這樣

let product = vm.mount('#demo')
    product.$data.message = '麥香魚';
    //結果：網頁畫面的『大麥克』換成『麥香魚』

Try1:試著用$data將上述範例中大麥克改成麥香雞，份數改成5份，單價改成109。

template模板屬性

除了Vue.js的模板語法，在HTML使用{{}}，我們也可以透過實體核心(option)內的template屬性來定義：

<body>
  <div id="app">
  </div>
  <script>
    const vm = Vue.createApp({
      template:
        `<div>品項：{{message}}</div>
      <div>單價：{{price}}</div>
      <div>數量：{{amount}}</div>
      <div>總計：{{amount*price}}</div>`,
      data() {
        return {
          message: '大麥克',
          price: 199,
          amount: 2
        }
      }
    });
    vm.mount('#app');
  </script>
</body>

上述範例中，我們使用template來定義網頁的畫面，寫法基本上是和HTML一樣的～